<template>
  <a-modal
    title="创建选题"
    width="50%"
    :visible="visible"
    @cancel="close"
    :footer="null">
    <a-steps :current="step" style="width: 80%;margin: 0 auto 20px;">
      <a-step title="选择工作流"></a-step>
      <a-step title="文章类型"></a-step>
      <a-step title="基本信息"></a-step>
    </a-steps>
    <div class="step-module" v-show="step==0">
      <a-row type="flex" :gutter="[16,16]" class="flex-container">
        <a-col :span="6" v-for="item in flows" :key="item.workflowId">
          <div class="flex-item"
               @click="form.workflowId=item.workflowId"
               :class="item.workflowId===form.workflowId?'item-selected':''">
            {{item.workflowName}}
          </div>
        </a-col>
      </a-row>
      <div class="buttons">
        <a-button @click="close">取消</a-button>
        <a-button type="primary" @click="goTwoStep">下一步</a-button>
      </div>
    </div>
    <div v-show="step==1" class="step-module">
      <a-row>
        <a-col class="flex-item" :span="6" :offset="4" v-for="item in types" :key="item.value"
               :class="{'item-selected':item.value==form.taskType}"
               @click="form.taskType=item.value">
          <img :src="item.icon">
          <div style="margin-top: 10px;">{{item.name}}</div>
        </a-col>
      </a-row>
      <div class="buttons">
        <a-button @click="close">取消</a-button>
        <a-button @click="step--">上一步</a-button>
        <a-button type="primary" @click="goThreeStep">下一步</a-button>
      </div>
    </div>
    <div v-show="step==2" class="step-module">
      <a-spin :spinning="loading">
        <a-form-model v-bind="{labelCol:{sm:5,xl:4},wrapperCol:{sm:17,xl:18}}" :model="form" :rules="rules"
                      ref="formModel">
          <a-form-model-item label="选题名称" prop="taskName">
            <a-input v-model="form.taskName" placeholder="请输入选题名称"></a-input>
          </a-form-model-item>
          <a-form-model-item label="重要程度">
            <a-radio-group v-model="form.urgencyLevel">
              <a-radio value="0">一般</a-radio>
              <a-radio value="1">重要</a-radio>
              <a-radio value="2">紧急</a-radio>
            </a-radio-group>
          </a-form-model-item>
          <a-form-model-item label="截止时间" prop="endTime">
            <j-date :showTime="true" dateFormat='YYYY-MM-DD HH:mm:ss' v-model="form.endTime"></j-date>
          </a-form-model-item>
          <a-form-model-item label="内部选题" v-if="params.topic">
            <a-input style="display: none" :value="form.topicIds"></a-input>
            <a-input readOnly :value="form.topicNames"></a-input>
          </a-form-model-item>
          <a-form-model-item label="选题线索" v-if="params.clues">
            <div>
              <a-tag v-for="item in params.clues" :key="item.id">{{item.clueTitle}}</a-tag>
            </div>
          </a-form-model-item>
          <a-form-model-item label="原始素材库">
            <a-input-search
                    placeholder="请选择原始素材库"
                    v-model="form.contentTitle"
                    readOnly
                    @search="onContentSearch">
              <a-button slot="enterButton" icon="search">选择</a-button>
            </a-input-search>
          </a-form-model-item>
          <a-form-model-item label="选题附件">
            <j-upload :returnUrl="false" v-model="form.fileList"></j-upload>
          </a-form-model-item>
          <div class="buttons">
            <a-button @click="close">取消</a-button>
            <a-button @click="step--">上一步</a-button>
            <a-button type="primary" @click="createTask">创建</a-button>
          </div>
        </a-form-model>
      </a-spin>
    </div>
    <content-model ref="contentModel" @modelOk = "contentChange"></content-model>
  </a-modal>
</template>

<script>
  //创建任务
  import {getAction, postAction} from "@/api/manage";
  import ContentModel from './model/ContentModel'

  export default {
    name: "TaskCreate",
    components: { ContentModel },
    data() {
      return {
        visible: false,
        loading: false,
        step: 0,
        types: [{name: '文章', value: '0', icon: require('@/assets/task-article.png')},
          {name: '活动', value: '1', icon: require('@/assets/task-activity.png')}],
        flows: [],
        form: {
          taskName: '',
          workflowId: undefined,
          taskType: '0',
          urgencyLevel: '0',
          topicIds: '',
          topicNames: '',
          contentTitle:'',
          contentBankId:''
        },
        rules: {
          taskName: [
            {required: true, message: '请输入选题名称', trigger: 'blur'}
          ]
        },
        params: {},
      }
    },
    created() {
      this.loadFlows();
    },
    methods: {
      show(params) {
        this.visible = true;
        if(!this.flows||this.flows.length===0){
          this.loadFlows();
        }
        if (params) {
          this.params = params;
          if (params.topic) {
            this.form.taskName = params.topic.topicName;
            this.form.topicIds = params.topic.id;
            this.form.topicNames = params.topic.topicName;
          }
        }
      },
      close() {
        this.visible = false;
      },
      //去第二步
      goTwoStep() {
        if (this.form.workflowId) {
          this.step++;
        } else {
          this.$message.warn('请选择工作流')
        }
      },
      //去第三步
      goThreeStep() {
        if (this.form.taskType) {
          this.step++;
        } else {
          this.$message.warn('请选择文章类型')
        }
      },
      //加载可选流程
      loadFlows() {
        getAction('task/taskInfo/queryAviWorkflow').then(res => {
          this.flows = res.result;
        })
      },
      //节流
      createTask() {
        if (this.loading) {
          return;
        }
        this.$refs.formModel.validate(validate => {
          if (validate) {
            this.loading = true;
            if (this.params.clues) {
              this.form.clueIdList = this.params.clues.map(item => item.id);
            }
            if (this.form.fileList) {
              this.form.attachList = this.form.fileList.map(item => {
                return {name: item.fileName, url: item.filePath};
              });
            }
            postAction('task/taskInfo/createTask', this.form).then(res => {
              if (res.success) {
                this.$message.success('创建任务成功');
                this.close();
                this.$emit('createSuccess');
              } else {
                this.$message.error(res.message)
              }
            }).catch(error => console.log(error))
              .finally(() => {
                this.loading = false;
              })
          } else {
            return false;
          }
        })
      },
      // 弹出内容库
      onContentSearch(){
        this.$refs.contentModel.show();
      },
      contentChange({id,contentTitle}){
        this.form.contentTitle = contentTitle;
        this.form.contentBankId = id;
      }
    }
  }
</script>

<style scoped>
  .step-module {
    background-color: #eff1f3;
    padding: 30px 20px;
  }

  .flex-container {
    align-items: stretch;
  }

  .flex-item {
    border-radius: 8px;
    background-color: white;
    text-align: center;
    padding: 10px;
    cursor: pointer;
  }

  .flex-item:hover {
    opacity: 0.8;
    transition: all 500ms;
  }

  .item-selected {
    border: 1px solid #1890FF;
  }

  .buttons {
    text-align: center;
    margin-top: 20px;
  }

  .buttons > button {
    margin: 0 5px;
  }

</style>
